<template>
    <view class="page-wrap">
        <view class="list-wrap">
            <template v-for="v in 20">
                <view class="list-item">
                    <image src="https://q8.itc.cn/q_70/images03/20240223/e60bf93ead7842baa5a3b5284b4a23eb.jpeg" mode="aspectFill" class="item-img" />
                    <view class="item-like">
                        <image src="/static/icon/no-like.svg" class="icon-like" v-if="v % 2 == 0" />
                        <image src="/static/icon/like.svg" class="icon-like" v-else />
                        点赞
                    </view>
                    <!-- footer -->
                    <view class="item-f-wrap">
                        <view class="item-title">活动名称活动名称</view>
                        <view class="item-info">
                            <image src="https://ww4.sinaimg.cn/mw690/005NYbuhgy1hrrh8coxjmj30yh1nf7es.jpg" mode="aspectFill" class="item-avatar" />
                            <view class="item-name">用户昵称</view>
                            <image src="https://ww1.sinaimg.cn/mw690/007tLi2uly1hqif2lg76fj30j60sodj9.jpg" mode="aspectFill" class="item-code" />
                        </view>
                    </view>
                </view>
            </template>
        </view>
        <view class="join-but" @tap="toPage">上传参与</view>
    </view>
</template>

<script setup>
const toPage = () => {
    uni.navigateTo({ url: '/pages/voting-activity/attend' });
};
</script>

<style lang="scss" scoped>
.page-wrap {
    padding: 30rpx 30rpx 190rpx;
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #f5f5f5;
    .list-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        .list-item {
            position: relative;
            width: calc(100% / 2 - 10rpx);
            height: 450rpx;
            border-radius: 15rpx;
            overflow: hidden;
            .item-img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
            }
            .item-f-wrap {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 9;
                padding: 0 10rpx 20rpx;
                color: #fff;
                .item-title {
                    margin-bottom: 10rpx;
                    font-size: 30rpx;
                }
                .item-info {
                    display: flex;
                    align-items: center;
                    gap: 0 5rpx;
                    .item-avatar,
                    .item-code {
                        width: 50rpx;
                        height: 50rpx;
                        border-radius: 50%;
                        border: 1rpx solid #fff;
                    }
                    .item-name {
                        flex: 1;
                        font-size: 24rpx;
                    }
                }
            }
            .item-like {
                padding: 5rpx 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0 10rpx;
                position: absolute;
                top: 15rpx;
                left: 15rpx;
                z-index: 9;
                background: rgba(234, 85, 6, 1);
                border-radius: 10rpx;
                font-size: 24rpx;
                color: #fff;
                .icon-like {
                    width: 25rpx;
                    height: 25rpx;
                }
            }
        }
    }
    .join-but {
        position: fixed;
        bottom: 60rpx;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 630rpx;
        height: 90rpx;
        color: #fff;
        border-radius: 10rpx;
        z-index: 99;
        background: rgba(234, 85, 6, 1);
    }
}
</style>
